<template>
  <el-dialog :title.sync="modalTitle" :visible.sync="showDialog" :width="width"  :before-close="handleClose">
    <div class="edu-page-title">{{title}}</div>
    <el-table :data="data.slice(start, end)" size="mini">
      <el-table-column v-for="column in columns" :key="column.key" :label="column.label">
        <template slot-scope="scope">{{ scope.row[column.key] }}</template>
      </el-table-column>
    </el-table>
    <div class="edu-pagination">
      <div class="float-right">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          :total="data.length"
          layout="total, sizes, prev, pager, next, jumper"
          style="float: right;margin:10px 60px 0 0;"
          @current-change="handlerCurrentChange"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="okCallBack">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    modalTitle: String,
    title: String,
    showDialog: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    okCallBack: {
      type: Function,
      required: true,
    },
    handleClose: {
      type: Function,
      required: true,
    },
    width: {
        type: String,
        default: '50%'
    },
    pagination: {
      type: Object,
      default: function() {
        return {
          currentPage: 1,
          pageSizes: [20,50,100,500,1000],
          pageSize: 20,
          total: 0,
        }
      },
    },
  },
  methods: {
    handlerCurrentChange(val) {
      this.pagination.currentPage = val
    },
  },
  computed: {
    start() {
      return (this.pagination.currentPage - 1) * 10
    },
    end() {
      return Math.min(
        this.pagination.currentPage * 10,
        this.data ? this.data.length: 0
      )
    },
  }
}
</script>
<style>
</style>

